jQuery Plugin for Complex Animations On Your Page - Animelt

Animelt is a lightweight and awesome jQuery plugin that allows you to run complex transform animations on your web page.

How to use it:

1. Include jQuery library and Animelt.js on your page

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="animelt.js"></script>

2. The HTML

<div class='container'>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>

3. Add a button to trigger the effect

<a href="#" id="t1">Teste</a>

4. The CSS

<style type="text/css">
.container {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
height: 300px;
width: 300px;
border: 1px solid #ccc
}
.test {
display: inline;
float: left;
position: relative;
width: 49%;
height: 49%;
background-color: red;
border: 1px solid #ccc;
opacity: 0.6;
}
</style>

5. The javascript

<script type="text/javascript">
$(function(){
	var i = 0;
	$("#t1").click(function(){
		i += Math.round( Math.random( i ) * 180 );
		$(".test").animelt({
			transform: "rotate("+i+"deg)"
		}, 1500);
	});

})
</script>

---

This awesome jQuery plugin is developed by grsabreu. For more Advanced Usages, please check the demo page or visit the official website.